window.addEventListener('load', function () {
    var mySwiper = new Swiper('.swiper', {
        autoplay: true,
        pagination: {
            el: '.swiper-pagination',
        },
    })
    var CloudServiceTitleData = {
        title: '为开发者提供云服务',
        text: '基于API技术向客户提供多领域、多场景的Sass服务；助力开发者提高生产效率，加快工作进程',
        more: '探索云服务&nbsp;&gt;',
        list: [
            {
                ImgSrc: './imgs/service01.svg',
                title: 'API私有化服务',
                text: '可部署本地&专有云的Web API',
                more: '去搜索'
            }, {
                ImgSrc: './imgs/service02.svg',
                title: '源码云监测',
                text: '实时代码托管、威胁情报监控',
                more: '去搜索'
            }, {
                ImgSrc: './imgs/service03.svg',
                title: '源码有赢',
                text: '一站式营销活动服务平台',
                more: '去搜索'
            }, {
                ImgSrc: './imgs/service04.svg',
                title: 'YuanMa API',
                text: 'API开发者协作平台',
                more: '去搜索'
            }
        ]
    };



    const cloudService = getelement('#cloudService .bigTitle')
    let bigtitle = `
        <h1>${CloudServiceTitleData.title}</h1>
        <p>${CloudServiceTitleData.text}</p>
        <a href='#'>${CloudServiceTitleData.more}</a>
    `
    cloudService.innerHTML = bigtitle

    const container = getelement('#cloudService .container>ul')
    let ultext = ``
    CloudServiceTitleData.list.forEach(function (v) {
        ultext +=
            ` <li>
                <div>
                    <img src="${v.ImgSrc}" alt="图片损坏">
                </div>
                <div class="smallTitle">
                    <h4>${v.title}</h4>
                    <p>${v.text}</p>
                    <a href="#">${v.more}</a>
                </div>
            </li>`
    })
    container.innerHTML = ultext


    var APICateData = {
        title: '海量的API服务，丰富的API分类',
        text: '提供400多种API和数据块，快捷、易用、稳定，极大的满足了用户数据需求；节省了寻找时间，节约了数据维护的服务器和人力成本。',
        more: '探索API&nbsp;&gt;',
        list: [
            {
                ImgSrc: './imgs/api01.svg',
                text: '生活服务'
            },
            {
                ImgSrc: './imgs/api02.svg',
                text: '金融科技'
            },
            {
                ImgSrc: './imgs/api03.svg',
                text: '交通地理'
            },
            {
                ImgSrc: './imgs/api04.svg',
                text: '充值缴费'
            },
            {
                ImgSrc: './imgs/api05.svg',
                text: '数据智能'
            },
            {
                ImgSrc: './imgs/api06.svg',
                text: '企业工商'
            },
            {
                ImgSrc: './imgs/api07.svg',
                text: '应用开发'
            },
            {
                ImgSrc: './imgs/api08.svg',
                text: '电子商务'
            },
            {
                ImgSrc: './imgs/api03.svg',
                text: '吃喝玩乐'
            },
            {
                ImgSrc: './imgs/api03.svg',
                text: '文娱视频'
            }
        ]
    };

    const APICatetitle = getelement('#APICate .bigTitle')
    let APICatebigtitle = `
        <h1>${APICateData.title}</h1>
        <p>${APICateData.text}</p>
        <a href='#'>${APICateData.more}</a>
    `
    APICatetitle.innerHTML = APICatebigtitle

    const APICateelement = getelement('#APICate .container')
    let text01 = ``
    APICateData.list.forEach(function (v) {
        text01 +=
            ` <div>
                <img src="${v.ImgSrc}" alt="图片损坏">
                <p>${v.text}</p>
            </div>`
    })
    APICateelement.innerHTML = text01
    getelement('#APICate .container>div').forEach(function (v) {

        v.addEventListener('mouseover', function () {
            this.style.backgroundColor = '#2f7ee9';
            this.style.Color = '#fff';
            this.children[0].src = this.children[0].src.replace('.svg', '-c.svg')
        })
        v.addEventListener('mouseout', function () {
            this.style.backgroundColor = '#fff';
            this.style.Color = 'black';
            this.children[0].src = this.children[0].src.replace('-c.svg', '.svg')
        })
    })
    const rimglist = [
        {
            imgsrc: 'url("./imgs/hcfc.png")',
            text: '河北幸福消金基于业务对三方数据的需求，需接入数百个外部数据源，涉及一百多个不同维度的数据供应商，通过代码开发对接众多接口，费时费力。通过聚合数据的三方数据管理平台，实现了完善的供应商管理、自动化测试、零代码数据源接入、数据质量管理、数据表现监控，从而保障各类信贷业务产品的风险控制正常运行，支撑公司消费贷款业务快速发展。'
        },
        {
            imgsrc: 'url("./imgs/sznsyh.png")',
            text: '苏州银行在数仓建设过程中创建了新的数据模型，需要开放出去供外部系统调用。传统做法首先需要将数仓中的模型通过数据同步工具落地到目标数据库中，然后应用开发需要了解底层数据源细节，开发数据接口供调用，过程冗长复杂，难以维护，运维成本高。通过聚合数据API服务系统平台可从数据库直接生成相关的操作API，搭配前端页面即可使用，极大简化基础API 开发、维护工作。'
        },
        {
            imgsrc: 'url("./imgs/szyh.png")',
            text: '中国银联经过多年建设，可通过银联开放式综合支付服务平台，提供账单、订单、票券信息、行业场景等各类内容支付服务，但是传统的接口对接集成流程，存在API对接开发接入流程较复杂、技术对接沟通不便捷、产品覆盖面不足等痛点。通过聚合数据“APIMaster 慧集”的产品能力，构建新一代开放式内容交换平台，将银联传统的内容支付服务从抽象的API接口转换为具象的内容商品，同时也通过API开放底座聚合上游生态伙伴的金融服务能力，赋能上下游生态伙伴，持续推进「开放互联」的业务目标。'
        }]
    const rimg = getelement('#unicorn>div:nth-child(3)>div:first-child')
    const ltext = getelement('#unicorn>div:nth-child(3)>div:last-child>div>p:first-child')

    var index = 0
    this.window.setInterval(function () {
        if (index > rimglist.length - 2) {
            index = -1
        }
        index++;
        rimg.style.background = rimglist[index].imgsrc
        ltext.innerHTML = rimglist[index].text

        console.log("index")
    }, 2000)

})
